<template>
  <div id="app">
    
    <section class="app-main clearfix">
    <navbar></navbar>
      <div class="container is-fluid is-marginless app-content">
        <router-view
          class="animated zoomIn"
          transition="fade"
          transition-mode="out-in"
          keep-alive>
        </router-view>
      </div>
    </section>
    <footerBar class="footer-wrapper"></footerBar>
  </div>
</template>

<script>
  import navbar from './components/Navigation';
  import footerBar from './components/FooterBar';

  export default {
    name: 'app',
    components: {
      navbar,
      footerBar,
    },
  };
</script>

<style lang="scss">
@import '~bulma/bulma';
@import '~font-awesome/css/font-awesome.min.css';
@import '~nprogress/nprogress.css';
@import '~animate.css/animate.min.css';
@import 'scss/base.scss';
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  margin-top: 20px;
  .app-main {
    width: 100%;
    min-height: 100%;
    .app-content {
      padding-bottom: 100px;
    }
  }
  .footer-wrapper {
    position: relative;
    width: 100%;
    margin: -100px auto 0 auto;
    clear: both;
    @include px2rem(font-size, 20);
    @include px2rem(height, 100);
  }
}

</style>
